<template>
	<view class="page">
    <!-- 自定义头部 -->
    <view class="cu-custom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
    	<view class="cu-bar fixed" :style="style">
    		<view class="action" @tap="back">
    			<text class="cuIcon-back text-white"></text>
    		</view>
    		<view class="content text-white" :style="[{top:StatusBar + 'px'}]">
    			{{i18n['砍价免费拿']}}
    		</view>
        <!-- #ifndef MP-WEIXIN -->
        <view class="right padding-right text-white" @click="toggleRuleModal">
          {{i18n['规则']}}
        </view>
        <!-- #endif -->
    	</view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
      <view class="text-white rules" @click="toggleRuleModal" :style="{top:CustomBar + 5 +'px'}">
        {{i18n['规则']}}
      </view>
     <!-- #endif -->
    <!-- 商品信息 -->
    <view class="goods-info">
		<view class="block-220 radius overHidden">
			<fu-image :src="detail.thumb" mode="aspectFill"></fu-image>
		</view>
      <text class="info-text margin-top-sm text-white text-lg text-cut">{{detail.name}}</text>
    </view>
    <!-- 砍价信息 -->
    <view class="bargain-info">
      <view class="flex flex-direction justify-center align-center">
        <text class="text-bold text-lg">{{i18n['已砍']}}<text class="text-xxl text-color">{{detail.bargain_money}}</text>{{i18n['元']}},{{i18n['免费拿仅差百分之']}}</text>
        <text class="info-price text-bold text-color margin-top-sm">
          <text class="price">{{detail.surplus_percentage}}</text>
        </text>
      </view>
      <view class="margin-top">
        <view class="cu-progress round margin-top-xs">
          <view class="button-color round" :style="[{ width: (100 - detail.surplus_percentage)+'%'}]"></view>
        </view>
        <view class="number-rule">
          <text>10%</text>
          <text>50%</text>
          <text>90%</text>
        </view>
      </view>
      <view class="margin-top">
        <!-- #ifndef MP-WEIXIN -->
        <button class="action-button button-color cu-btn round" @click="shareFriend">{{i18n['邀请好友帮砍']}}</button>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <button class="action-button button-color cu-btn round" open-type="share" >{{i18n['邀请好友帮砍']}}</button>
        <!-- #endif -->
      </view>
    </view>
    <!-- 砍价记录 -->
    <view class="list">
      <view class="list-title">{{i18n['砍价记录']}}</view>
      <view class="list-content">
        <block v-for="(item,index) in logs" :key="index">
          <view class="list-item">
            <view class="avatar">
				<fu-image :src="item.head_img" mode="aspectFill"></fu-image>
            </view>
            <view class="info">
              <view>{{item.nick_name}}</view>
              <view class="text-sm margin-top-xs">{{i18n['使用砍价道具狂砍一刀']}}</view>
            </view>
            <view class="text-color-2">{{i18n['砍掉']}}{{item.bargain_money}}{{i18n['元']}}</view>
          </view>
        </block>
      </view>
    </view>
    <!-- 活动规则 -->
    <fu-popup v-model="showRuleModal" mode="center" width="500rpx" height="700rpx" border-radius="16" :mask-custom-style="{background: 'rgba(0,0,0,0.65)'}" :mask-close-able="false">
      <view class="rule-box">
        <view class="rule-box-title solid-bottom">
          {{i18n['活动规则']}}
        </view>
        <scroll-view class="rule-box-content" scroll-y>
          <jyf-parser :html="rules"></jyf-parser>
        </scroll-view>
        <view class="rule-box-close solid-top" @click="toggleRuleModal">
          {{i18n['关闭']}}
        </view>
      </view>
    </fu-popup>
	</view>
</template>

<script>
  import {SHAREURL} from '@/common/config.js';
  import richText from '@/common/utils/richText.js';
	export default {
		data() {
			return {
        showNavbar: false,
        logs: [],
        detail: {},
        bargain_id: '',
        timer: null,
        showRuleModal: false, // 显示规则弹窗
        rules: "", // 砍价规则
			}
		},
    computed: {
      style(){
        let StatusBar = this.StatusBar;
        let CustomBar = this.CustomBar;
        let isShow = this.showNavbar;
        if(isShow){
          return `height:${CustomBar}px;padding-top:${StatusBar}px;background: #ff5834;`;
        }else{
          return `height:${CustomBar}px;padding-top:${StatusBar}px;`;
        }
      }
    },
    onPageScroll(e) {
      let scrollTop = e.scrollTop;
      if(scrollTop >= 10){
        this.showNavbar = true;
      }else{
        this.showNavbar = false;
      }
    },
    onLoad(options) {
      const {bargain_id} = options;
      console.log(bargain_id)
      this.bargain_id = bargain_id;
      this.getBargainDetail();
      this.getBargainRecord();
      this.timer = setInterval(() => {
        this.getBargainDetail();
        this.getBargainRecord();
        this.getBargainType();
      },5000)
      this.getBargainRuleData();
    },
    onUnload() {
      this.timer && clearInterval(this.timer);
    },
    onShareAppMessage(res) {
      return{
        title:this.i18n['我在砍价免费拿']+this.detail.name+','+this.i18n['借你大刀砍一砍~'],
        path:'/pages/activity/bargain/help-bargain/index?bargain_id='+this.bargain_id,
        imageUrl: this.detail.thumb,
      }
    },
		methods: {
      // 返回
      back(){
        uni.navigateBack();
      },
      // 切换规则弹窗显示与否
      toggleRuleModal(){
        this.showRuleModal = !this.showRuleModal;
      },
      // 邀请好友帮砍
      shareFriend(){
        let downloadUrl = uni.getStorageSync('downloadUrl');
        uni.share({
          provider: 'weixin',
          type: '0',
          title: this.i18n['我在砍价免费拿']+this.detail.name+','+this.i18n['借你大刀砍一砍~'],
          scene: 'WXSceneSession',
          href: SHAREURL+'pages/bargain-share?bargain_id='+this.bargain_id,
          imageUrl: this.detail.thumb,
          success: (res) => {
            console.log("1111",res);
          },
          fail: (err) => {
            console.log('222222',err)
          }
        })
      },
      // 获取砍价记录
      getBargainRecord(){
        this.$api.post(global.apiUrls.postBargainRecord,{bargain_id: this.bargain_id})
        .then(res => {
          console.log('砍价记录',res.data);
          if(res.data.code == 1){
            this.logs = res.data.data.data;
          }
        })
      },
      // 砍价详情
      getBargainDetail(){
        this.$api.post(global.apiUrls.postBargainDetail,{bargain_id: this.bargain_id})
        .then(res => {
          console.log('砍价详情',res.data)
          if(res.data.code == 1){
            this.detail = res.data.data;
          }
        })
      },
      // 是否砍价成功
      getBargainType(){
        this.$api.post(global.apiUrls.postBargainSuccess,{bargain_id: this.bargain_id})
        .then(res => {
          console.log('砍价状态',res.data)
          if(res.data.code == 1){
            this.timer && clearInterval(this.timer);
            this.$message.info(this.i18n['恭喜你,砍价成功']);
            setTimeout(() => {
              this.$urouter.navigateTo('/pages/order/order-list/all-order/index')
            },800)
          }
        })
      },
      // 砍价规则
      getBargainRuleData(){
        this.$api.post(global.apiUrls.postOperationGetColumn, {
          category_id: 24,
        }).then(res => {
          var res = res.data
          if (res.code == 1) {
            this.rules = richText.format(res.data.content);
          } else {
            this.rules = ''
          }
        })

      }
		}
	}
</script>

<style lang="scss" scoped>
  .page{
    min-height: 100vh;
    background: linear-gradient(#ff5834,#fed892);
    padding-bottom: 32rpx;
  }
   .rules{
      position: fixed;
      right: 32rpx;
    }
  .goods-info{
    height: 350rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .info-text{
      max-width: 280rpx;
    }
  }
  .bargain-info{
    margin: 0 32rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 50rpx;
    .info-price{
      height: 100rpx;
      font-size: 88rpx;
      .price{
        display: inline-block;
        animation: heart 1.2s linear infinite reverse;
      }
    }
    .desc-tag{
      display: flex;
      justify-content: flex-end;
    }
    .number-rule{
      display: flex;
      padding: 0 20rpx;
      justify-content: space-between;
      margin-top: 10rpx;
    }

    .action-button{
      width: 100%;
      height: 88rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10rpx;
      // animation: heart 0.8s infinite;
    }
  }
  .list{
    margin: 50rpx 32rpx 0;
    .list-title{
      height: 100rpx;
      background-color: #ffd79c;
      color: #cb2615;
      font-size: 38rpx;
      font-weight: bold;
      line-height: 100rpx;
      text-align: center;
      border-radius: 16rpx 16rpx 0 0;
    }
    .list-content{
      padding: 32rpx;
      background-color: #fef7eb;
      border-radius: 0 0 16rpx 16rpx;
      .list-item{
        height: 140rpx;
        display: flex;
        align-items: center;
        .avatar{
          width: 100rpx;
          height: 100rpx;
          margin-right: 20rpx;
          image{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .info{
          flex: 1;

        }
      }
    }
  }
  // 规则弹窗
  .rule-box{
    width: 100%;
    height: 100%;
    background-color: #0062CC;
    background: linear-gradient(top,#fcf9df,#fff0c4);
    .rule-box-title{
      height: 100rpx;
      font-size: 36rpx;
      line-height: 100rpx;
      text-align: center;
      font-weight: bold;
      color: #3b2204;
    }
    .rule-box-content{
      height: calc(100% - 200rpx);
      color: #615013;
      padding: 20rpx;
	    font-size: 32rpx;
    }
    .rule-box-close{
      height: 100rpx;
      font-size: 32rpx;
      line-height: 100rpx;
      text-align: center;
      color: #615013;
    }
  }
  // 公共样式 start
  .block-220{
    width: 220rpx;
    height: 220rpx;
    min-width: 220rpx;
    min-height: 220rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .button-color{
    background: linear-gradient(left,#f3400a,#fa9500);
  }
  .text-color{
    color: $theme;
  }
  .text-color-2{
    color: #60391b;
  }
  @keyframes heart{
  	0%{
  		transform: scale(1);
  	}
  	60%{
  		transform: scale(0.8);
  	}
  	100%{
  		transform: scale(1);
  	}
  }
  // 公共样式 end
</style>
